<template>
  <ElPopoverBox placement="right-start" :width="1000" :padding="0" @clickBtn="onBtn">
    <template #btn>
      <slot name="btn" v-if="$slots.btn" />
      <div class="goodBtn" v-else>{{ code || '选择规格' }}</div>
    </template>
    <template #default="{ closeBtn }">
      <div class="goodBox">
        <div class="goodBox-left">
          <el-scrollbar>
            <ul>
              <template v-for="item in dataInfo.groupArr">
                <li @click="onGroupBtn(item)" :class="{
                  on: item.value === dataInfo.on
                }" v-if="code ? true : item.value !== 'specifications'">
                  <p>{{ item.label }}</p>
                </li>
              </template>
            </ul>
          </el-scrollbar>
        </div>
        <div class="goodBox-main" v-loading="dataInfo?.loading">
          <div class="goodBox-head">
            <div>
              <ElInputBox :data="dataInfo.search" dataName="likeWords" :width="360"
                :disabled="dataInfo.on === 'specifications'" :select="{
                  width: 100,
                  key: 'queryDataBaseFiled',
                  options: [
                    {
                      label: '物料名称',
                      value: 'goodsName',
                    },
                    {
                      label: '供应商',
                      value: 'supplierName',
                    },
                    {
                      label: '规格编号',
                      value: 'specificationCode',
                    },
                    {
                      label: '规格名称',
                      value: 'specificationName',
                    }
                  ]
                }" @changeBtn="searchBtn" />
              <el-button @click="searchBtn" icon="Search">搜索</el-button>
            </div>
          </div>
          <div class="goodBox-content">
            <ElTableBox v-bind="{
              height: 500,
              tbody: dataInfo?.tbody,
              thead: dataInfo?.thead,
              search: dataInfo?.search,
            }" @searchBtn="searchBtn" @rowClick="changeBtn($event, closeBtn)">
              <template #details="{ row }">
                {{ row.details?.length || 0 }}
              </template>
            </ElTableBox>
          </div>
        </div>
      </div>
    </template>
  </ElPopoverBox>
</template>
<script setup lang="ts">

const { proxy } = getCurrentInstance() as any;
const props = withDefaults(
  defineProps<{
    code?: any;
    data?: any;
    goodKey?: any
  }>(),
  {
    goodKey: {
      supplierCode: "supplierCode", //供应商code
      supplierName: "supplierName", //供应商名称
      goodsCode: "goodsCode", //物料code
      goodsName: "goodsName", //物料名称
      specificationCode: "specificationCode", //物料规格code
      specificationName: "specificationName", //物料规格名称
      goodsUnit: "goodsUnit", //物料单位
      goodsTypeName: "goodsTypeName", //物料类型
      totalStockQuantity: "stockQuantity", //总库存
      stockGoodsCode: "stockGoodsCode", //库存唯一code
      productionBatchNumber: "productionBatchNumber", //批次号
      productionDate: "productionDate", //生产日期
      warehouseName: "warehouseName", //仓库名称
      warehouseAreaCode: "warehouseAreaCode", //库区code
      warehouseAreaName: "warehouseAreaName", //库区名称
      areaShelfCode: "areaShelfCode", //库位code
      areaShelfName: "areaShelfName", //库位名称
      stockQuantity: "stockQuantity", //物料库存
      goodsPrice: "goodsPrice", //单价
      specificationJsValue: "specificationJsValue" //转换比例
    }
  },
);
const dataInfo: any = reactive({
  on: '',
  loading: false,
  search: {
    pageIndex: 1, // 当前页码 (从1开始)
    pageSize: 30, // 每页显示数据的数量
    totalCount: 0, // 总数据数量
    queryDataBaseFiled: "goodsName", // 关键字查询字段，空值查询全部（如果需要单独设置）
    likeWords: props.code ? props.data[props.goodKey.goodsName] : "", // 查询关键字，空值查询全部（如果需要单独设置）
    orderByFiled: "", // 排序字段
    orderByType: 0, // 排序方式，0-倒序,1-升序
    isShowDisabled: -1, // 是否显示禁用,-1：显示所有的；0：仅显示未作废的；1 仅显示作废的
    groupCode: "", // 物料分组编码
    supplierCode: "", // 供应商编码
    state: 1 // 状态:-1:全部；0待确认；1已确认；2已作废
  },
  tbody: [],
  thead: [
    {
      label: '物料编号',
      prop: 'goodsCode',
      align: 'center',
      width: 120
    },
    {
      label: '物料类型',
      prop: 'goodsTypeName',
      align: 'center',
      width: 80
    },
    {
      label: '供应商',
      prop: 'supplierName',
      align: 'left',
      width: 120,
    },
    {
      label: '物料名称',
      prop: 'goodsName',
      align: 'left',
      width: null,
    },
    {
      label: '规格型号',
      prop: 'specificationName',
      align: 'center',
      width: 100
    },
    {
      label: '单位',
      prop: 'goodsUnit',
      align: 'center',
      width: 80
    },
    {
      label: '库存数量',
      prop: 'totalStockQuantity',
      align: 'center',
      width: 80
    },
    {
      label: '批次明细',
      prop: 'details',
      align: 'center',
      width: 80
    },
  ],
  menu: [],
  groupArr: [],
});
import { goodGroup } from '@/utils/optionsArr.ts';
//选择分组
const onGroupBtn = (row: any) => {
  dataInfo.on = row.value
  let _search = dataInfo.search
  switch (row.value) {
    case 'specifications':
      _search.groupCode = ''
      _search.queryDataBaseFiled = 'goodsName'
      _search.likeWords = props.data[props.goodKey.goodsName]
      break;
    case 'all':
      _search.groupCode = ''
      _search.likeWords = ''
      break;

    default:
      _search.groupCode = row.value
      _search.likeWords = ''
      break;
  }
  searchBtn()
}
//搜索
const searchBtn = () => {
  dataInfo.loading = true
  proxy.$api.Goods.GetPageGoodsSpecificationView(dataInfo.search).then((res: any) => {
    dataInfo.tbody = res.list
    dataInfo.search.totalCount = res.totalCount
    dataInfo.loading = false
  });
}
const emit = defineEmits<{
  //fn为父组件引入子组件是定义的子组件事件属性，可随意定义
  (event: 'changeBtn', row: any): void;
}>();
const changeBtn = (row: any, closeBtn?: Function) => {
  if (props.goodKey) {
    for (const key in props.goodKey) {
      props.data[props.goodKey[key]] = row[key as any]
    };
  }
  if (closeBtn) {
    closeBtn()
  }
  emit('changeBtn', row);
}
const onBtn = () => {
  //获取物料分组
  goodGroup(dataInfo, 'groupArr', (arr: any) => {
    let _arr = arr?.map((el: any) => ({
      label: el.label,
      value: el.value,
    })) || []
    let _arrPush: any = [
      {
        label: '物料规格',
        value: 'specifications',
      },
      {
        label: '全部',
        value: 'all',
      },
    ]
    _arr.unshift(..._arrPush)
    onGroupBtn(props.code ? _arr[0] : _arr[1])
    dataInfo.groupArr = _arr
  })
}
onMounted(() => {

});
</script>
<style scoped lang="scss">
.goodBtn {
  width: 100%;
  border: 1px solid var(--el-border-color);
  border-radius: var(--el-border-radius-base);
  background-color: var(--el-fill-color-bl);
  cursor: pointer;
}

.goodBox {
  overflow: hidden;
  display: flex;

  >* {
    &:not(:last-child) {
      border-right: 1px $border solid;
    }
  }

  .goodBox-left {
    width: 120px;

    ul {
      li {
        cursor: pointer;
        line-height: 36px;
        padding: 0 12px;

        &:hover {
          background: $hover;
          color: $primary;
        }

        &.on {
          background: $primary;
          color: $white;
        }
      }
    }
  }

  .goodBox-main {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    .goodBox-head,
    .goodBox-foot {
      height: 44px;
      padding: 0 6px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      >* {
        &:not(:last-child) {
          margin-right: 6px;
        }

        >* {
          &:not(:last-child) {
            margin-right: 6px;
          }
        }
      }
    }

    .goodBox-content {
      flex: 1;
      overflow: hidden;
    }

  }
}
</style>